<template>
  <view class="warehouse-container">
    <!-- 新增按钮 -->
    <view class="action-bar">
      <button @click="showAddWarehouseModal" class="action-button">新增仓库</button>
    </view>

    <!-- 搜索框 -->
    <view class="search-bar">
      <input type="text" v-model="searchQuery" placeholder="请输入名称以搜索仓库" class="search-input" />
      <button @click="searchWarehouses" class="search-button">搜索</button>
    </view>

    <!-- 仓库列表 -->
    <view class="warehouse-list">
      <!-- 空空如也提示 -->
      <view v-if="warehouses.length === 0" style='display: flex;align-items: center;justify-content: center;margin-top: 50px;'>
        <image src='../../Resources/Image/空空如也.png' style='width: 120px;height:120px;'></image>
      </view>
      <view v-for="(warehouse, index) in warehouses" :key="index" class="warehouse-item">
        <view class="warehouse-info">
          <view class="warehouse-name">{{ warehouse.warehouse_name }}</view>
          <view class="warehouse-code">{{ warehouse.warehouse_code }}</view>
        </view>
        <view class="warehouse-actions">
          <image src='../../Resources/Image/编辑.png' style='width: 25px;height:25px;margin-right: 5px;' @click="editWarehouse(warehouse)"></image>
          <image src='../../Resources/Image/删除.png' style='width: 27px;height:27px;' @click="deleteWarehouse(warehouse)"></image>
        </view>
      </view>
    </view>

    <!-- 新增仓库弹窗 -->
    <view v-if="showModal" class="modal">
      <view class="modal-content">
        <view class="modal-header">
          <text class="modal-title">新建仓库</text>
        </view>
        <view class="modal-body">
          <input type="text" v-model="newWarehouse.warehouse_name" placeholder="仓库名称" class="input-field" />
          <input type="text" v-model="newWarehouse.warehouse_code" placeholder="仓库代号" class="input-field" />
          <textarea v-model="newWarehouse.remark" placeholder="备注" class="textarea-field"></textarea>
        </view>
        <view class="modal-footer">
          <button @click="submitWarehouse" class="action-button">提交</button>
          <button @click="hideModal" class="action-button">取消</button>
        </view>
      </view>
    </view>
	
	<!-- 修改仓库弹窗 -->
	<view v-if="UpdateModal" class="modal">
	  <view class="modal-content">
	    <view class="modal-header">
	      <text class="modal-title">修改仓库信息</text>
	    </view>
	    <view class="modal-body">
	      <input type="text" v-model="newWarehouse.warehouse_name" placeholder="仓库名称" class="input-field" />
	      <input type="text" v-model="newWarehouse.warehouse_code" placeholder="仓库代号" class="input-field" />
	      <textarea v-model="newWarehouse.remark" placeholder="备注" class="textarea-field"></textarea>
	    </view>
	    <view class="modal-footer">
	      <button @click="UpdateWarehouse" class="action-button">提交</button>
	      <button @click="hideModal" class="action-button">取消</button>
	    </view>
	  </view>
	</view>
	
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { config } from '../../config';
import { TokenStore } from '../../Store/TokenStore';
import { LoginState } from '../../util/LoginSate';
import { onPullDownRefresh , onReachBottom } from "@dcloudio/uni-app";

// 仓库数据
let warehouses = ref([]);

let AllWareHouse = ref([]);

let UpdateModal = ref(false)

//分页数据

let pageinfo = ref({
	size:10,
	page:1
})



onMounted(() => {
	if(!LoginState()){
		uni.showToast({
		  title: '登录失效',
		  icon: 'error'
		});
		uni.redirectTo({
			url:"/pages/index/index"
		})
		return ;
	}
  AllWarehouses();
});


//--------------------------------------下拉刷新/触底加载----------------------------

onPullDownRefresh(()=>{
	pageinfo.value.page = 1;
	AllWareHouse.value = []
	warehouses.value = []
	AllWarehouses();
	uni.stopPullDownRefresh()
})

onReachBottom(()=>{
	AllWarehouses();
})

//--------------------------------------------------------------------------



//修改仓库数据
function UpdateWarehouse(){
	uni.request({
		url:`${config.baseURL}/Warehouse/UpdateHouse`,
		method:'POST',
		data:newWarehouse.value,
		header: {
		  'content-type': 'application/json',
		  'Authorization': TokenStore().token
		},
		success:(res)=>{
			if(res.data.data === '1'){
				uni.showToast({
				  title: "修改成功",
				  icon: 'success'
				});
				pageinfo.value.page = 1;
				AllWareHouse.value = []
				warehouses.value = []
				AllWarehouses();
				hideModal()
			}
			else if(res.data.data === '0'){
				uni.showToast({
				  title: "系统繁忙",
				  icon: 'error'
				});
			}
			else if(res.data.data === 'error'){
				uni.showToast({
				  title: "数据库错误",
				  icon: 'error'
				});
			}
			else if(res.data.data === '令牌过期'){
				uni.showToast({
				  title: "请重新登录",
				  icon: 'error'
				});
			}
		},
		fail:(err)=>{
			uni.showToast({
			  title: err.errMsg,
			  icon: 'error'
			});
		}
	})
}

// 新增仓库弹窗状态
const showModal = ref(false);
const newWarehouse = ref({ warehouse_name: '', warehouse_code: '', remark: '' });

// 搜索框数据
const searchQuery = ref('');

// 显示新增仓库弹窗
const showAddWarehouseModal = () => {
  showModal.value = true;
};

// 隐藏新增仓库弹窗
const hideModal = () => {
  showModal.value = false;
  UpdateModal.value = false;
  Object.keys(newWarehouse.value).forEach(key => {
    newWarehouse.value[key] = '';
  });
};

// 提交新增仓库
const submitWarehouse = () => {
  if (Object.values(newWarehouse.value).some(value => value === '')) {
    uni.showToast({
      title: "请填写所有字段",
      icon: 'error'
    });
    return;
  }

  uni.request({
    url: `${config.baseURL}/Warehouse/AddWareHouse`,
    method: 'POST',
    data: newWarehouse.value,
    header: {
      'content-type': 'application/json',
      'Authorization': TokenStore().token
    },
    success: (res) => {
      if (res.data.data === '1') {
        uni.showToast({
          title: "添加成功，请下拉刷新后查看",
          icon: 'none'
        });
        hideModal();
      } else {
        uni.showToast({
          title: res.data.data || "系统繁忙",
          icon: 'error'
        });
      }
    },
    fail: (err) => {
      uni.showToast({
        title: err.errMsg,
        icon: 'error'
      });
    }
  });
};

// 编辑仓库
const editWarehouse = (warehouse) => {
  newWarehouse.value = {...warehouse};
  UpdateModal.value = true;
};

// 删除仓库
const deleteWarehouse = (warehouse) => {
  uni.request({
    url: `${config.baseURL}/Warehouse/DeleteWarehouse`,
    method: 'POST',
    data: warehouse,
    header: {
      'content-type': 'application/json',
      'Authorization': TokenStore().token
    },
    success: (res) => {
      if (res.data.data === '令牌过期') {
        uni.showToast({
          title: '请重新登录',
          icon: 'error'
        });
      } else if (res.data.data === 'error') {
        uni.showToast({
          title: '数据库错误',
          icon: 'error'
        });
      } else {
        uni.showToast({
          title: '删除成功',
          icon: 'success'
        });
        pageinfo.value.page = 1;
        AllWareHouse.value = []
        warehouses.value = []
        AllWarehouses();
      }
    },
    fail: (err) => {
      uni.showToast({
        title: err.errMsg,
        icon: 'error'
      });
    }
  });
};

// 获取所有仓库
const AllWarehouses = () => {
  uni.request({
    url: `${config.baseURL}/Warehouse/AllWH`,
    method: 'POST',
	data:pageinfo.value,
    header: {
      'content-type': 'application/json',
      'Authorization': TokenStore().token
    },
    success: (res) => {
      if (res.data.data === "error") {
        uni.showToast({
          title: '数据库错误',
          icon: 'error'
        });
      } else if (res.data.data === '令牌过期') {
        uni.showToast({
          title: '请重新登录',
          icon: 'error'
        });
      } else {
		let data = JSON.parse(res.data.data);
        warehouses.value.push(...data)
		AllWareHouse.value.push(...data)
		pageinfo.value.page+=pageinfo.value.size
      }
    }
  });
};

// 搜索仓库
const searchWarehouses = () => {
  // 搜索逻辑可以在这里实现，或者使用 computed 属性进行过滤
  if(searchQuery.value === ''){
	  warehouses.value = AllWareHouse.value
	  return ;
  }
  
  const searchedGoods = AllWareHouse.value.filter(item => item.warehouse_name === searchQuery.value);
  console.log("查询出数据"+JSON.stringify(searchedGoods))
  warehouses.value = searchedGoods
};


</script>


<style scoped>
.warehouse-container {
  padding: 20px;
  background-color: #eef7f6; /* 浅蓝色背景 */
  height: 100vh;
}

.action-bar {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.action-button {
  border: none;
  border-radius: 5px;
  cursor: pointer;
  width: 80%;
  height: 40px;
  background-color: #3e92cc; /* 蓝色 */
  color: white;
  transition: background-color 0.3s;
}

.action-button:hover {
  background-color: #3079a4;
}

.search-bar {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.search-input {
  padding: 10px;
  width: 70%;
  border: 1px solid #eaeaea;
  border-radius: 5px;
  margin-right: 10px;
}

.search-button {
  border: none;
  border-radius: 5px;
  width: 20%;
  cursor: pointer;
  height: 40px;
  background-color: #007aff; /* 蓝色 */
  color: white;
  transition: background-color 0.3s;
}

.search-button:hover {
  background-color: #0051b3;
}

.warehouse-list {
  width: 100%;
  margin: 0 auto;
}

.warehouse-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 10px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
}

.warehouse-item:hover {
  transform: translateY(-5px);
}

.warehouse-info {
  display: flex;
  align-items: center;
}

.warehouse-name {
  margin-right: 10px;
  color: #333;
}

.warehouse-code {
  color: #666;
}

.warehouse-actions {
  display: flex;
  align-items: center;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: #fff;
padding: 20px;
border-radius: 8px;
width: 90%;
max-width: 500px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.modal-header {
font-size: 18px;
font-weight: bold;
color: #007aff;
border-bottom: 1px solid #eaeaea;
padding-bottom: 10px;
margin-bottom: 20px;
}

.modal-body {
margin: 20px 0;
}

.input-field, .textarea-field {
width: 95%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #eaeaea;
border-radius: 5px;
height: 20px;
}

.picker {
padding: 10px;
background-color: #eaeaea;
border-radius: 5px;
margin-bottom: 20px;
}

.modal-footer {
display: flex;
justify-content: flex-end;
}

.modal-footer button {
margin-left: 10px;
}
</style>